<script lang="ts" setup>
import {
  addgllpList,
  deletegllpList,
  downHttp,
  gllpList,
  isShowhttp,
  topHttp,
  upHttp,
} from "@fl/api/flagship/flagship";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive } from "vue";

import PopBulid from "./popBulid.vue";

const route = useRoute();
const buildRef = ref<any>();
const dialogVisible = ref<boolean>(false);
const projectShow = ref<boolean>(false);
const gridOptions = reactive({
  border: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: "序号", type: "seq", width: "60" },
    { field: "logo", slots: { default: "images" }, title: "楼盘图片", width: 140 },
    { field: "ghxmmc", title: "楼盘名称" },
    { field: "company", title: "开发企业" },
    {
      field: "projectShowValue",
      slots: { default: "default" },
      title: "是否展示",
      width: 100,
    },
    { slots: { default: "operate" }, title: "操作", width: 280 },
  ],
  data: [],
  editConfig: {
    mode: "row",
    showStatus: true,
    trigger: "manual",
  },
  height: 530,
  keepSource: true,
  loading: false,
  pagerConfig: {
    currentPage: 1,
    enabled: true,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 200, 500],
    total: 100,
  },
  showOverflow: true,
});
// 分页器操作
const gridEvents = {
  pageChange({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
    }

    getTableList();
  },
};
// 确定关联楼盘
function popsubmit() {
  const obj = {
    projectIds: buildRef.value.projectIds,
    shopSupervisorId: route.query.id,
  };
  if (obj.projectIds.length === 0) {
    ElMessage.warning("请先选择楼盘");
    return false;
  }
  addgllpList(obj).then((res) => {
    dialogVisible.value = false;

    if (res.code === 200) {
      ElMessage.success("操作成功");
    }
    getTableList();
  });
}
// 关联楼盘
function guanlianchange() {
  dialogVisible.value = true;
}
function getTableList() {
  if (route.query.id) {
    gridOptions.loading = true;
    const options = {
      pageNum: gridOptions.pagerConfig.currentPage,
      pageSize: gridOptions.pagerConfig.pageSize,
    };
    gllpList(route.query.id, options).then((res) => {
      gridOptions.loading = false;
      gridOptions.data = res.rows;
      gridOptions.pagerConfig.total = res.total;
      projectShow.value = gridOptions.data.every((item) => item.projectShow === "1");
      gridOptions.data &&
        gridOptions.data.forEach((item) => {
          if (item.projectShow === "1") {
            item.projectShowValue = true;
          } else {
            item.projectShowValue = false;
          }
        });
    });
  }
}
onMounted(() => {
  getTableList();
});
// 删除关联楼盘
function deletedpclick(row) {
  ElMessageBox.confirm("是否确定删除?", "注意", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const options = {
      ids: [],
      shopSupervisorId: route.query.id,
    };
    options.ids.push(row.id);
    deletegllpList(options).then(() => {
      ElMessage.success("删除成功");
      getTableList();
    });
  });
}
// 单个是否展示按钮
function switchSingleChang(row) {
  const obj = {
    ids: [],
    isShow: row.projectShowValue,
  };
  obj.ids.push(row.id);
  isShowhttp(obj).then(() => {
    ElMessage.success("修改成功");
    getTableList();
  });
}
function switchChang(val) {
  const obj = {
    ids: [],
    isShow: val.value,
  };
  gridOptions.data.forEach((item) => {
    obj.ids.push(item.id);
    item.projectShowValue = val.value;
  });
  console.log(obj);

  isShowhttp(obj).then(() => {
    ElMessage.success("修改成功");
    getTableList();
  });
}
// 置顶
function topclick(row) {
  topHttp(row.id).then(() => {
    ElMessage.success("操作成功");
    getTableList();
  });
}
function updownclick(row) {
  downHttp(row.id).then(() => {
    ElMessage.success("操作成功");
    getTableList();
  });
}
function upclick(row) {
  upHttp(row.id).then(() => {
    ElMessage.success("操作成功");
    getTableList();
  });
}
</script>

<template>
  <ElButton class="p-10 mb-10" @click="guanlianchange()"> 关联楼盘 </ElButton>

  <div>是否全部展示：<vxe-switch v-model="projectShow" @change="switchChang" /></div>

  <vxe-grid v-bind="gridOptions" v-on="gridEvents">
    <template #images="{ row, rowIndex }">
      <el-image
        style="width: 120px; height: 80px; margin: 10px 0px"
        :src="row.logo"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="4"
        :preview-src-list="[row.logo]"
      />
      <div
        v-if="rowIndex === 0 && gridOptions.pagerConfig.currentPage === 1"
        style="
          position: absolute;
          top: 0;
          right: 0;
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-right: 10px solid red;
        "
      ></div>
    </template>

    <template #default="{ row }">
      <vxe-switch v-model="row.projectShowValue" @change="switchSingleChang(row)" />
    </template>

    <template #operate="{ row }">
      <el-text class="mx-1" type="primary" @click="deletedpclick(row)"> 删除 </el-text>

      <el-divider direction="vertical" />

      <el-text class="mx-1" type="primary" @click="upclick(row)"> 向上 </el-text>

      <el-divider direction="vertical" />

      <el-text class="mx-1" type="primary" @click="updownclick(row)"> 向下 </el-text>

      <el-divider direction="vertical" />

      <el-text class="mx-1" type="primary" @click="topclick(row)"> 置顶 </el-text>
    </template>
  </vxe-grid>

  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="关联楼盘" width="60vw">
    <PopBulid ref="buildRef" />

    <template #footer>
      <div class="form-btn">
        <el-button plain @click="dialogVisible = false"> 关闭 </el-button>

        <el-button type="primary" @click="popsubmit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.mx-1 {
  cursor: pointer;
}
</style>
